import React, { useState } from "react";
import { Layout, theme } from 'antd';
import { Outlet } from 'react-router-dom';
import layoutStyle from "./appLayoutFrame.module.scss"
import FrameHeader from './header/header'
import MenuContent from './menu/menu';

import FrameHeaderTabComponent from './tabs/tabs';
import APPOPTIONS from "@/app.config";

const { Sider, Header, Content } = Layout;
const AppLayoutFrame = () => {
    const [collapsed, setCollapsed] = useState(false);
    const { token: { colorBgContainer, borderRadiusLG }, } = theme.useToken();


    return (
        <>
            <div className={layoutStyle.xx_applayoutFreme}>
                <FrameHeader />
                <div className={layoutStyle.xx_layout_container}>
                    {/* 左侧菜单 */}
                    <Sider collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
                        <div className="demo-logo-vertical" />
                        <MenuContent
                        />
                    </Sider>
                    {/* 路由出口页面 */}
                    <Layout className="center">

                        {
                            APPOPTIONS.FRAME_TAB ? <FrameHeaderTabComponent /> : null
                        }
                        <Content >
                            <Outlet />
                        </Content>
                    </Layout>
                </div>
            </div>

        </>
    )
}
export default AppLayoutFrame;